<template>
	<div style="padding-top: 70px;">
		<div class="publish-top">
			<div class="left-icon" @click="tabReturn">
				<img src="../../../assets/images/left.png"/>
			</div>
			<p v-if="detailsData.cate_name!=''">{{detailsData.cate_name}}</p>
			<p v-else>匿名贴</p>
			<span @click="onReport(detailsData.article_id)">举报</span>
		</div>
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			
			<div class="post-content" :id="detailsData.article_id">
				<h3 class="post-title">{{detailsData.article_title}}</h3>
				<div class="post-name">
					<div class="name-left">
						<div class="name-cate-name" v-if="detailsData.cate_name!=''">
							<img :src="detailsData.user.user_himg"/>
							<p>{{detailsData.user.user_nickname}}</p>
						</div>
						<div class="name-cate-name" v-else>
							<b></b>
							<p>匿名</p>
						</div>
						<div class="name-comment">
							<img src="../../../assets/images/details/comment.png"/>
							<span>{{detailsData.comment_num}}</span>
						</div>
					</div>
					<p class="name-right">楼主</p>
				</div>
				<div class="post-text">
					<div style="min-height:300px;">
						<p>{{detailsData.article_desc}}</p>
						<div class="textImg">
							<img v-for="pic in detailsData.article_img" :src="pic" v-show="detailsData.article_img != ''"/>
						</div>
					</div>
					<div class="textFabulos">	
						<!--踩赞-->
						<div @click="onStep">
							<img src="../../../assets/images/details/stepon.png"/>
							<span>{{detailsData.step_num}}</span>
						</div>
						<!--点赞-->
						<div @click="onLikes">
							<img src="../../../assets/images/details/fabulous.png"/>
							<span class="textCor">{{detailsData.likes_num}}</span>
						</div>
					</div>
				</div>
			</div>
			<!--评论列表-->
			<v-reload :on-infinite-load="onInfiniteLoad" :parent-pull-up-state="infiniteLoadData.pullUpState">
				<div class="post-comment">
					<ul>
						<li v-for="(list,index) in infiniteLoadData.pullUpList" :id="list.comment_id">
							<div class="comment-con" @click="tabNameReply(list.user_nickname,list.comment_id)">
								<img :src="list.commentD_img"/>
								<span :style="{color:list.commentD_cor}" v-if="list.comment_score>0">+{{list.comment_score}}</span>
								<span :style="{color:list.commentD_cor}" v-else>{{list.comment_score}}</span>
								<p>{{list.user_nickname}}：{{list.comment_desc}}</p>
							</div>
							<div class="comment-pic" v-show="list.comment_img != ''">
								<img :src="list.comment_img|url" />
							</div>
							<div class="comment-num" 
								@click="tabReply(list.comment_id)" 
								v-show="list.reply_comment_num != 0"
							>共{{list.reply_comment_num}}条评论 ></div>
						</li>
					</ul>
				</div>
			</v-reload>
		</van-pull-refresh>
		<!--评论框-->
		<div class="comment-footer" v-if="isFooterHide == true">
			<div class="comm-foot" v-if="isReply">
				<input type="text"  placeholder="发表你的评论" @click="tabHideFot"/>
				<!--<div class="paging">
					<p>〈</p>
					<div><span>1</span>/3</div>
					<p>〉</p>
				</div>-->
				<img src="../../../assets/images/details/forward.png" @click="onButton" class="share"/>
			</div>
			<!--回复input栏-->
			<div class="comm-replay" v-else>				
				<div class="replay-inp">
					<input type="text" autofocus="autofocus" :placeholder="commName" v-model="valReplay" v-focus="focusState" @blur="tabReaplay"/>
					<button :class="valReplay !==''?'butColor':''" @click="tabReplayBtn">发送</button>
				</div>	
			</div>
		</div>
		<div class="share-con" v-if="isShareCon">
			<div class="opaciy-con" @click="tapOpaciyCon"></div>
			<div class="share-list">
				<div class="liat-icon" @click="shareButton('weixin','WXSceneSession')">
					<img src="../../../assets/images/home/wx.png"/>
					<p>微信好友</p>
				</div>
				<div class="liat-icon" @click="shareButton('weixin','WXSceneTimeline')">
					<img src="../../../assets/images/home/pyq.png" />
					<p>朋友圈</p>
				</div>
				<div class="liat-icon" @click="shareButton('qq')">
					<img src="../../../assets/images/home/qq.png"/>
					<p>QQ好友</p>
				</div>
			</div>
			
		</div>
		<!--隐藏层-->
		<div class="comm-popup" v-if="isFooterHide == false">
			<div class="opaciy" @click="onLoseFocus"></div>
			<div class="popup-input">
				<div class="popup-textarea">
					<textarea  placeholder="发表你的评论" v-model="valPop" v-focus="focusState"></textarea>  
					<!--@blur="onLoseFocus"-->
				</div>
				<div class="popup-button">
					<div class="rea-pic">
						<img :src="isPicacs == false ? picUploadA:picUploadB" @click="onPicdd"/>
						<img :src="isScore == false ? picScoreA:picScoreB" @click="onScorecad"/>
					</div>
					<button @click="sendOutBtn">发送</button>
				</div>                                                                                         
				<div class="popList">
					<!--上传图片-->
					<ul class="pic-list" v-show="isPicacs">
						<li v-for="(pic,index) in imgs">
							<img :src="pic"/>
							<span @click="onResmove(index)">X</span>
						</li>
						<li v-if="imgs.length>=8?false:true">
							<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
							  <img src="../../../assets/images/upload.png"/>
							</van-uploader>
						</li>
					</ul>
					<!--评分-->
					<div class="score-con-center" v-show="isScore">
						<img :src="picStars"/>
						<p>{{rangeIndex}}</p>
						<!--滑块-->
						<div class="score-slider">
							<input type="range" min="-5" max="5" v-model="rangeIndex" @change="onRange">	
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
	import qs from 'qs';
	import user from '@/utils/isLogin';
	import PullUpReload from '@/components/commons/PullUpReload';
	import { PullRefresh,Uploader } from 'vant';
	var shares = null;
	export default{
		data(){
			return{
				isLoading: true,
				isFooterHide:true,//显示隐藏评论框
				isReply:true,//显示回复目标的开关
				focusState:false,//新的评论框的聚焦
				isPicacs:false,//上传
				isScore:false,//评分
				picUploadA:require('../../../assets/images/details/picWxz.png'),
				picUploadB:require('../../../assets/images/details/picXZ.png'),
				picScoreA:require('../../../assets/images/details/reaWxz.png'),
				picScoreB:require('../../../assets/images/details/reaXZ.png'),
				valPop:'',//评论的value
				valReplay:'',//回复的value
				detailsData:{
					user:{}
				},//详情数据
				commentData:[],//评论数据
				articleId:'',
				rangeIndex:0,//评分分数
				scoreO:require('../../../assets/images/details/pic-o.png'),
				scorea:require('../../../assets/images/details/a.png'),
				scoreb:require('../../../assets/images/details/b.png'),
				scorec:require('../../../assets/images/details/c.png'),
				scored:require('../../../assets/images/details/d.png'),
				scoree:require('../../../assets/images/details/e.png'),
				scoreA:require('../../../assets/images/details/pic-A.png'),
				scoreB:require('../../../assets/images/details/pic-B.png'),
				scoreC:require('../../../assets/images/details/pic-C.png'),
				scoreD:require('../../../assets/images/details/pic-D.png'),
				scoreE:require('../../../assets/images/details/pic-E.png'),
				picStars:require('../../../assets/images/details/pic-o.png'),
				commName:'',
				commID:'',
				// 上拉加载的设置
		      infiniteLoadData: {
		        initialShowNum: 5, // 初始显示多少条
		        everyLoadingNum: 5, // 每次加载的个数
		        pullUpState: 0, // 子组件的pullUpState状态
		        pullUpList: [], // 上拉加载更多数据的数组
		        showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
		      },
		      imgs:[],
		      isClick:true,
		      comment_on:null,
		      article_de:null,
		      isShareCon:false,//分享弹框
		      shareName:'',
		      shareId:'',
		      shareCon:''
			}
		},
		directives:{
		  	focus: {
		  		// 当绑定元素插入到 DOM 中。
		  		inserted: function (el) {
		        // 聚焦元素
		        el.focus()
		      }
		   }
	   },
		components:{
			'v-reload': PullUpReload,
			[PullRefresh.name]:PullRefresh,
			[Uploader.name]:Uploader
		},
		filters: {
		  url: function (value) {
		    if (!value) return ''
		    value = user.src + value
		    return value
		  }
		},
		created(){
			var curr = plus.webview.currentWebview();
			//当前帖子的id
			this.articleId = curr.articleId;
			
			if(curr.type==1){
				//详情接口
				var data = qs.stringify({
				   articleId:curr.articleId,
				})
				axios({
				   method: 'post',
				   url: user.src + '/index/Article/article_detail',
				   data:data
				})
				.then((res) => {
					console.log(JSON.stringify(res))
					if(res.data.status == 200){
						this.detailsData = res.data.data[0];
						this.shareName = res.data.data[0].user.user_nickname;
						this.shareId = res.data.data[0].article_id;
						this.shareCon = res.data.data[0].article_desc;
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
			}else{
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				//详情接口
				var data = qs.stringify({
					userid:userId,
				   articleId:curr.articleId,
				   commentId:curr.commentId
				})
				axios({
				   method: 'post',
				   url: user.src + '/index/Article/article_detail',
				   data:data
				})
				.then((res) => {
					
					if(res.data.status == 200){
						this.detailsData = res.data.data[0];
						this.shareName = res.data.data[0].user.user_nickname;
						this.shareId = res.data.data[0].article_id;
						this.shareCon = res.data.data[0].article_desc;
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
			}
			//详情定时器函数
			this.article_de = function(){
				var articleTime = setInterval(()=>{
					var data = qs.stringify({
					   articleId:this.articleId,
					})
					axios({
					   method: 'post',
					   url: user.src + '/index/Article/article_detail',
					   data:data
					})
					.then((res) => {
						if(res.data.status == 200){
							this.detailsData = res.data.data[0];
							clearInterval(articleTime)
						}
					})
					.catch((error)=> {
					    console.log(error);
					});
				},500)
			}
			//评论接口
			var data = qs.stringify({
			   articleId:this.articleId,
			})
			axios({
			   method: 'post',
			   url: user.src + '/index/comment/comment_on_the_list',
			   data:data
			})
			.then(res => {
				if(res.data.status == 200){	
					var commentData = res.data.data;
					commentData.map((item,i)=>{
						if(item.comment_score == '1'){
							item.commentD_img = this.scorea;
							item.commentD_cor = '#febc8e';
						}else if(item.comment_score == '2'){
							item.commentD_img = this.scoreb;
							item.commentD_cor = '#f2ac3c';
						}else if(item.comment_score == '3'){
							item.commentD_img = this.scorec;
							item.commentD_cor = '#f39106';
						}else if(item.comment_score == '4'){
							item.commentD_img = this.scored;
							item.commentD_cor = '#f3ad06';
						}else if(item.comment_score == '5'){
							item.commentD_img = this.scoree;
							item.commentD_cor = '#f3cf06';
						}else if(item.comment_score == '-1'){
							item.commentD_img = this.scoreA;
							item.commentD_cor = '#fc8686';
						}else if(item.comment_score == '-2'){
							item.commentD_img = this.scoreB;
							item.commentD_cor = '#df6363';
						}else if(item.comment_score == '-3'){
							item.commentD_img = this.scoreC;
							item.commentD_cor = '#ea4a4a';
						}else if(item.comment_score == '-4'){
							item.commentD_img = this.scoreD;
							item.commentD_cor = '#f13232';
						}else if(item.comment_score == '-5'){
							item.commentD_img = this.scoreE;
							item.commentD_cor = '#ce0000';
						}else if(item.comment_score == '0'){
							item.commentD_img = this.scoreO;
							item.commentD_cor = '#cccccc';
						}
					})
					this.commentData = commentData;
					this.getPullUpDefData();
				}
			})
			.catch((error)=> {
			    console.log(error);
			});
			
			this.comment_on = function(){
				var comTime = setInterval(()=>{
					var data = qs.stringify({
					   articleId:this.articleId,
					})
					axios({
					   method: 'post',
					   url: user.src + '/index/comment/comment_on_the_list',
					   data:data
					})
					.then(res => {
						if(res.data.status == 200){	
							var commentData = res.data.data;
							commentData.map((item,i)=>{
								if(item.comment_score == '1'){
									item.commentD_img = this.scorea;
									item.commentD_cor = '#febc8e';
								}else if(item.comment_score == '2'){
									item.commentD_img = this.scoreb;
									item.commentD_cor = '#f2ac3c';
								}else if(item.comment_score == '3'){
									item.commentD_img = this.scorec;
									item.commentD_cor = '#f39106';
								}else if(item.comment_score == '4'){
									item.commentD_img = this.scored;
									item.commentD_cor = '#f3ad06';
								}else if(item.comment_score == '5'){
									item.commentD_img = this.scoree;
									item.commentD_cor = '#f3cf06';
								}else if(item.comment_score == '-1'){
									item.commentD_img = this.scoreA;
									item.commentD_cor = '#fc8686';
								}else if(item.comment_score == '-2'){
									item.commentD_img = this.scoreB;
									item.commentD_cor = '#df6363';
								}else if(item.comment_score == '-3'){
									item.commentD_img = this.scoreC;
									item.commentD_cor = '#ea4a4a';
								}else if(item.comment_score == '-4'){
									item.commentD_img = this.scoreD;
									item.commentD_cor = '#f13232';
								}else if(item.comment_score == '-5'){
									item.commentD_img = this.scoreE;
									item.commentD_cor = '#ce0000';
								}else if(item.comment_score == '0'){
									item.commentD_img = this.scoreO;
									item.commentD_cor = '#cccccc';
								}
							})
							this.commentData = commentData;
							this.getPullUpDefData();
							clearInterval(comTime);
						}
					})
					.catch((error)=> {
					    console.log(error);
					});
				},500)
			}
			
			let plusReady = ()=>{
	         plus.share.getServices(function(s) {
	             shares = {};
	             for (var i in s) {
	                 var t = s[i];
	                 shares[t.id] = t;
	             }
	             console.log("获取分享服务列表成功");
	         }, function(e) {
	             console.log("获取分享服务列表失败：" + e.message);
	         });
			};
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener("plusready", plusReady, false);
			}
		},
		mounted(){
//		   this.getPullUpDefData();
		},
		methods:{
			onButton(){
				this.isShareCon = true;
			},
			tapOpaciyCon(){
				this.isShareCon = false;
			},
			shareButton(id,ex){
				var s = null;
				var taht = this;
            if (!id || !(s = shares[id])) {
                plus.nativeUI.toast("无效的分享服务！");
                return;
            }
            if (s.authenticated) {
//              alert("---已授权---");
                var msg = {
	                content: '分享-详情',
	                href: 'http://quanzi.51appdevelop.com/index/app/app.html?articleId='+taht.shareId,
	                title: taht.shareName+'圈子的八卦',
	                content: taht.shareCon,
	                thumbs: ['http://quanzi.51appdevelop.com/static/images/app.png'],
	                pictures: ['http://quanzi.51appdevelop.com/static/images/app.png'],
	                extra: {
	                    scene: ex
	                }
	            };
	            s.send(msg, function() {
//	                plus.nativeUI.toast("分享成功!");
	                taht.isShareCon = false;
	            }, function(e) {
	                console.log("分享失败!");
	            });
            } else {
//              alert("---未授权---");
                s.authorize(function() {
                    var msg = {
			                content: '分享-详情',
			                href: 'http://quanzi.51appdevelop.com/index/app/app.html?articleId='+taht.shareId,
			                title: taht.shareName+'圈子的八卦',
			                content: taht.shareCon,
			                thumbs: ['http://quanzi.51appdevelop.com/static/images/app.png'],
			                pictures: ['http://quanzi.51appdevelop.com/static/images/app.png'],
			                extra: {
			                    scene: ex
			                }
			            };
			            s.send(msg, function() {
//			                plus.nativeUI.toast("分享成功!");
			                taht.isShareCon = false;
			            }, function(e) {
			            	taht.isShareCon = false;
			                console.log("分享失败!");
			            });
                }, function(e) {
                    console.log("认证授权失败");
                });
            }
			},
			//评论删除图片
			onResmove(i){
				this.imgs.splice(i, 1);  
			},
			//评论上传图片
			onRead(file){		
				this.imgs.push(file.content)
			},
			// 获取上拉加载的初始数据
		   getPullUpDefData () {
		      this.infiniteLoadData.pullUpList = [];
		      for (let i = 0; i < this.infiniteLoadData.initialShowNum; i++) {
		      	if(this.commentData[i]== undefined) return;
		         this.infiniteLoadData.pullUpList.push(this.commentData[i])
		      }
		   },
		
		   getStartPullUpState () {
		      if (this.commentData.length === this.infiniteLoadData.initialShowNum) {
		        // 修改子组件的pullUpState状态
		        this.infiniteLoadData.pullUpState = 3
		      } else {
		        this.infiniteLoadData.pullUpState = 0
		      }
		   },
		   // 上拉一次加载更多的数据
		   getPullUpMoreData () {
//		   	if(this.commentData==[]&&this.infiniteLoadData.pullUpList==[]){
//		   		return;
//		   	}
		      this.showPullUpListLength = this.infiniteLoadData.pullUpList.length;
		      
		      if (this.infiniteLoadData.pullUpList.length + this.infiniteLoadData.everyLoadingNum > this.commentData.length) {
		        for (let i = 0; i < this.commentData.length - this.showPullUpListLength; i++) {
		          this.infiniteLoadData.pullUpList.push(this.commentData[i + this.showPullUpListLength])
		        }
		      } else {
		        for (let i = 0; i < this.infiniteLoadData.everyLoadingNum; i++) {
		          this.infiniteLoadData.pullUpList.push(this.commentData[i + this.showPullUpListLength])
		        }
		      }
		      if (this.commentData.length === this.infiniteLoadData.pullUpList.length) {
		      	
		        this.infiniteLoadData.pullUpState = 3;
		      } else {
		        this.infiniteLoadData.pullUpState = 0;
		      }
		   },
		   // 上拉加载
		   onInfiniteLoad (done) {
		   	if(this.commentData == undefined){
		   		this.infiniteLoadData.pullUpState = 3;
		   		return;
		   	}else{
		   		if (this.infiniteLoadData.pullUpState === 0) {
			        this.getPullUpMoreData()
			      }
		   		done();
		   	}
		   },
		   //下拉刷新
			onRefresh(){
		      setTimeout(() => {
		        	//详情接口
					var data = qs.stringify({
					   articleId:this.articleId,
					})
					axios({
					   method: 'post',
					   url: user.src + '/index/Article/article_detail',
					   data:data
					})
					.then((res) => {
						
						if(res.data.status == 200){
							this.detailsData = res.data.data[0];
						}
					})
					.catch((error)=> {
					    console.log(error);
					});
					//评论接口
					var data = qs.stringify({
					   articleId:this.articleId,
					})
					axios({
					   method: 'post',
					   url: user.src + '/index/comment/comment_on_the_list',
					   data:data
					})
					.then(res => {
						if(res.data.status == 200){	
							var commentData = res.data.data;
							commentData.map((item,i)=>{
								if(item.comment_score == '1'){
									item.commentD_img = this.scorea;
									item.commentD_cor = '#febc8e';
								}else if(item.comment_score == '2'){
									item.commentD_img = this.scoreb;
									item.commentD_cor = '#f2ac3c';
								}else if(item.comment_score == '3'){
									item.commentD_img = this.scorec;
									item.commentD_cor = '#f39106';
								}else if(item.comment_score == '4'){
									item.commentD_img = this.scored;
									item.commentD_cor = '#f3ad06';
								}else if(item.comment_score == '5'){
									item.commentD_img = this.scoree;
									item.commentD_cor = '#f3cf06';
								}else if(item.comment_score == '-1'){
									item.commentD_img = this.scoreA;
									item.commentD_cor = '#fc8686';
								}else if(item.comment_score == '-2'){
									item.commentD_img = this.scoreB;
									item.commentD_cor = '#df6363';
								}else if(item.comment_score == '-3'){
									item.commentD_img = this.scoreC;
									item.commentD_cor = '#ea4a4a';
								}else if(item.comment_score == '-4'){
									item.commentD_img = this.scoreD;
									item.commentD_cor = '#f13232';
								}else if(item.comment_score == '-5'){
									item.commentD_img = this.scoreE;
									item.commentD_cor = '#ce0000';
								}else if(item.comment_score == '0'){
									item.commentD_img = this.scoreO;
									item.commentD_cor = '#cccccc';
								}
							})
							this.commentData = commentData;
						}
					})
					.catch((error)=> {
					    console.log(error);
					});
		        	this.isLoading = false;
		      }, 1500); 
		   },
			//发表评论
			sendOutBtn(){
				var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
				if(userInfo == undefined || userInfo == null){
					if(this.isClick){
						this.isClick = false;
						var login = plus.webview.create('login.html','login',{},{});
						login.addEventListener("loaded", ()=> {
						   login.show('pop-in', 300);
						   this.isClick = true;
						   login = null;  
						}, false);
					}	
				}else{
					if(this.isClick){
						this.isClick = false;
						var imgArr = this.imgs.join('|');
						var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
						if(userId){
							if(this.rangeIndex == 0){
								plus.nativeUI.toast('请选择评分~')
							}else{
								var data = qs.stringify({
									userId:userId,
								   articleId:this.articleId,
								   score:this.rangeIndex,
								   img:imgArr,
								   desc:this.valPop
								})
								axios({
								   method: 'post',
								   url: user.src + '/index/comment/comment',
								   data:data
								})
								.then(res => {
									if(res.data.status == 1069){
										plus.nativeUI.toast(res.data.mesg);
										this.isFooterHide = true;
										this.valPop = '';
									}
									if(res.data.status == 200){						
										this.isFooterHide = true;
										this.valPop = '';
										this.comment_on();
										this.article_de();
										plus.nativeUI.toast('评论成功')
										this.isClick = true;
										//个推
							      	var data = qs.stringify({
											userid:res.data.userid,
											title:res.data.title,
											desc:res.data.desc,
											type:res.data.type
										})
										axios({
										   method: 'post',
										   url: user.src + '/index/Getui/pushPhone',
										   data:data
										})
										.then(res =>{
											if(res.data.data.result == 'ok'){
												
											}
										})
										.catch(err => {
									      console.log(err)
									   })
							      }
								})
								.catch((error)=> {
								    console.log(error);
								});
							}
						}
					}
				}
			},
			//打开上传
			onPicdd(){
				this.isPicacs = !this.isPicacs;
				this.isScore = false;
			},
			//打开评分
			onScorecad(){
				this.isScore = !this.isScore;
				this.isPicacs = false;
			},
			//评分
			onRange(){
				if(this.rangeIndex == 1){
					this.picStars = this.scorea;
				}else if(this.rangeIndex == 2){
					this.picStars = this.scoreb;
				}else if(this.rangeIndex == 3){
					this.picStars = this.scorec;
				}else if(this.rangeIndex == 4){
					this.picStars = this.scored;
				}else if(this.rangeIndex == 5){
					this.picStars = this.scoree;
				}else if(this.rangeIndex == -1){
					this.picStars = this.scoreA;
				}else if(this.rangeIndex == -2){
					this.picStars = this.scoreB;
				}else if(this.rangeIndex == -3){
					this.picStars = this.scoreC;
				}else if(this.rangeIndex == -4){
					this.picStars = this.scoreD;
				}else if(this.rangeIndex == -5){
					this.picStars = this.scoreE;
				}else if(this.rangeIndex == 0){
					this.picStars = this.scoreO;
				}
			},
			//点赞
			onLikes(){
				var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
				if(userInfo == undefined || userInfo == null){
					if(this.isClick){
						this.isClick = false;
						var login = plus.webview.create('login.html','login',{},{});
						login.addEventListener("loaded", ()=> {
						   login.show('pop-in', 300);
						   this.isClick = true;
						   login = null;  
						}, false);
					}
				}else{
					var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
					if(userId){
						var data = qs.stringify({
							userid:userId,
						   article_id:this.articleId
						})
						axios({
						   method: 'post',
						   url: user.src + '/index/collect/likes',
						   data:data
						})
						.then(res => {
							if(res.data.status == 200){
								this.detailsData.likes_num = res.data.num;
					      	plus.nativeUI.toast('点赞成功')
					      	//个推
					      	var data = qs.stringify({
									userid:res.data.userid,
									title:res.data.title,
									desc:res.data.desc,
									type:res.data.type
								})
								axios({
								   method: 'post',
								   url: user.src + '/index/Getui/pushPhone',
								   data:data
								})
								.then(res =>{
									if(res.data.data.result == 'ok'){
										
									}
								})
								.catch(err => {
							      console.log(err)
							   })
					      }
					      if(res.data.status == 1016){
					      	plus.nativeUI.toast('您已经赞过了~')
					      }
						})
						.catch(error => {
						    console.log(error);
						})
					}
				}
			},
			//踩贴
			onStep(){
				var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
				if(userInfo == undefined || userInfo == null|| userInfo == 'null'){
					if(this.isClick){
						this.isClick = false;
						var login = plus.webview.create('login.html','login',{},{});
						login.addEventListener("loaded", ()=> {
						   login.show('pop-in', 300);
						   this.isClick = true;
						   login = null;  
						}, false);
					}	
				}else{
					var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
					if(userId){
						var data = qs.stringify({
							userid:userId,
						   article_id:this.articleId
						})
						axios({
						   method: 'post',
						   url: user.src + '/index/collect/step',
						   data:data
						})
					   .then(res => {
					      if(res.data.status == 200){
					      	this.detailsData.step_num = res.data.num;
					      	plus.nativeUI.toast('踩贴成功')
					      }
					      if(res.data.status == 1018){
					      	plus.nativeUI.toast('您已经踩过了~')
					      }
					   })
					   .catch(err => {
					      console.log(err)
					   })
					}
				}
			},
			//关闭当前窗口
			tabReturn(){
				var currentPage = plus.webview.currentWebview();
				plus.webview.close(currentPage);
			},
			//打开回复窗口
			tabReply(id){
				if(this.isClick){
					this.isClick = false;
					var replyPage = plus.webview.create('replyPage.html','replyPage',{},{
						articleId:id
					});
					replyPage.addEventListener("loaded", ()=> {
					    replyPage.show('pop-in', 300);
					    this.isClick = true;
					    replyPage = null;
					}, false);
				}
			},
			//隐藏当前输入框并弹出新的评论框
			tabHideFot(){
				this.isFooterHide = !this.isFooterHide;
				this.focusState = true;
			},
			//发表评论失去焦点事件
			onLoseFocus(){
				if(this.valPop == ''){
					this.isFooterHide = !this.isFooterHide;
					this.focusState = !this.focusState;
					this.isScore = false;
					this.isPicacs = false;
				}else{
					return;
				}
			},
			//点击昵称回复框弹出
			tabNameReply(name,id){
				this.commID = id;
				this.commName ='回复 '+name;
				this.isReply = false;
				this.focusState = true;
				this.valReplay = '';
			},
			//回复框失焦
			tabReaplay(){
				if(this.valReplay == ''){
					this.isReply = !this.isReply;
					this.focusState = !this.focusState;	
				}else{
					return;
				}
			},
			//点击回复框发送按钮
			tabReplayBtn(){
				var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
				if(userInfo == undefined || userInfo == null){
					if(this.isClick){
						this.isClick = false;
						var login = plus.webview.create('login.html','login',{},{});
						login.addEventListener("loaded", ()=> {
						   login.show('pop-in', 300);
						   this.isClick = true;
						   login = null;  
						}, false);
					}	
				}else{
					var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
					if(userId){
						if(this.valReplay == ''){
							this.valReplay = '';
							this.isReply = true;
							this.focusState = !this.focusState;	
						}else{
							var data = qs.stringify({
								userId:userId,
							   desc:this.valReplay,
							   commentId:this.commID,
							   articleId:this.articleId
							})
							axios({
							   method: 'post',
							   url: user.src + '/index/comment/reply_to_comment',
							   data:data
							})
							.then(res => {
								if(res.data.status == 1069){
									plus.nativeUI.toast(res.data.mesg);
									this.valReplay = '';
									this.isReply = true;
									this.focusState = !this.focusState;
								}
								if(res.data.status == 200){
									this.comment_on();
									plus.nativeUI.toast('回复成功')
									this.valReplay = '';
									this.isReply = true;
									this.focusState = !this.focusState;
									//个推
						      	var data = qs.stringify({
										userid:res.data.userid,
										title:res.data.title,
										desc:res.data.desc,
										type:res.data.type
									})
									axios({
									   method: 'post',
									   url: user.src + '/index/Getui/pushPhone',
									   data:data
									})
									.then(res =>{
										if(res.data.data.result == 'ok'){
										}
									})
									.catch(err => {
								      console.log(err)
								   })
						      }
							})
							.catch((error)=> {
							    console.log(error);
							});
						}
					}
				}
			},
			//举报
			onReport(id){
				if(this.isClick){
					this.isClick = false;
					var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
					if(userInfo == undefined || userInfo == null){
						var login = plus.webview.create('login.html','login',{},{});
						login.addEventListener("loaded", ()=> {
						   login.show('pop-in', 300);
						   this.isClick = true;
						   login = null;  
						}, false);
					}else{
						var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
						if(userId){
							var report = plus.webview.create('report.html','report',{},{
								articleId:id
							});
							report.addEventListener("loaded", ()=>{
							    report.show('pop-in', 300);
							    this.isClick = true;
							    report = null;
							}, false);
						}
					}
				}
			}
		}
	}
</script>

<style lang="less">
	html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}
	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.share-con{
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 300;
	}
	.opaciy-con{
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.5;
	}
	.share-list{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 150px;
		background: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.liat-icon img{
		margin-left: 10px;
		width: 80px;
		height: 80px;
	}
	.liat-icon p{
		font-size: 26px;
		text-align: center;
	}
	.van-pull-refresh__loading{
		font-size: 26px;
	}
	.van-pull-refresh__text{
		font-size: 26px;
	}
	.hide{
		display: none;
	}
	.publish-top{
		position: fixed;
		top:0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;	
		display:flex;
		justify-content: space-between;
		.left-icon{
			width: 90px;
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			color: #fff;
			font-size: 28px;
			text-align: center;
			text-indent: 50px;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.post-content{
		background: #fff;
		padding: 40px 30px 20px;
		margin-bottom: 10px;
		.post-title{
			line-height: 42px;
			font-size: 36px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.post-name{
			height: 84px;
			margin-top: 20px;
			border-bottom: 0.1rem solid #ececec;
			display: flex;
			justify-content: space-between;
			.name-left{
				display: flex;
				justify-content: space-between;
				.name-cate-name{
					display: flex;
					justify-content: space-between;
					img{
						width: 64px;
						height: 64px;
						border-radius: 50%;
					}
					p{
						font-size: 22px;
						/*line-height: 68px;*/
						color: #0b96e7;
						margin-left: 10px;
						margin-top: 20px;
					}
					b{
						display: block;
						width:64px;
						height: 64px;
						float: left;
						border-radius: 50%;
						background: #CCCCCC;
						margin-top: 4px;
					}
				}
				
				.name-comment{
					display: flex;
					justify-content: space-between;
					margin-left: 11px;
					img{
						width: 30px;
						height: 30px;
						margin-top: 22px;
					}
					span{
						font-size: 18px;
						margin-top: 30px;
						margin-left: 10px;
					}
				}
			}
			.name-right{
				width: 58px;
				height: 28px;
				border: 0.1rem solid #b9b9b9;
				font-size: 20px;
				color: #b9b9b9;
				line-height: 30px;
				text-align: center;
				border-radius: 20px;
				margin-top: 18px;
			}
		}
		/*--------------------------设置---------------------------------------*/
		.post-text{
			padding-top: 58px;
			p{
				text-indent: 26px;
				font-size: 28px;
				line-height: 38px;
			}
			.textImg{
				width: 100%;
				overflow: hidden;
				img{
					display: block;
					width: 600px;
					height: auto;
					margin: 20px auto;
				}
			}
			.textFabulos{
				display: flex;
				flex-direction:row-reverse;
				/*justify-content: space-between;*/
				div{
					margin-left:30px;
					img{
						width: 30px;
						height: 30px;
					}
					span{
						font-size: 24px;
					}
					.textCor{
						color: #13a8ff;
					}
				}
			}
		}
	}
	.post-comment{
		background: #fff;
		padding: 0 30px;
		ul{
			overflow: hidden;
			li{
				padding: 19px 0 23px;
				border-bottom: 0.1rem solid #f3f3f3;
				.comment-con{
					display: flex;
					/*justify-content: space-between;*/
					align-items: center;
					img{
						width: 30px;
						height: 28px;
					}
					span{
						font-size: 15px;
						margin-top: 6px;
						margin-left: 5px;
					}
					p{
						font-size: 22px;
						margin-top: 4px;
						margin-left: 14px;
					}
				}
				.comment-pic{
					margin-top: 22px;
					margin-left: 75px;
					img{
						width: 500px;
						height: 300px;
					}
				}
				.comment-num{
					width: 160px;
					height: 62px;
					text-align: center;
					line-height: 64px;
					font-size: 22px;
					background: #f6f6f6;
					color: #0097ff;
					border-radius: 10px;
					margin-top: 8px;
					margin-left: 500px;
					
				}
			}
		}
	}
	.comment-Tips{
		width: 100%;
		height: 90px;
		line-height: 90px;
		text-align: center;
		font-size: 20px;
		color: #cacaca;
	}
	.comment-footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 94px;
		border-top: 2px solid #f2f2f2;
		background: #fff;
		.comm-foot{
			padding: 0 40px;
			height: 94px;
			display: flex;
			align-items: center;
			input{
				border:0;
				width: 100%;
				height: 60px;
				border: 0;
				font-size: 24px;
				padding-left: 20px;
				border: 0.1rem solid #d3d3d3;
				border-radius: 5px;
				outline: none;
				/*margin-left: 22px;*/
				/*margin-right: 10px;*/
			}
			.paging{
				display: flex;
				align-items: center;
				font-size: 28px;
				div{
					margin-left: 22px;
					margin-right: 22px;
					span{
						color: #00acff;
					}
				}
			}
			.share{
				width: 42px;
				height: 37px;
				margin-left:20px;
			}
		}
		.comm-replay{
			width: 640px;
			height: 59px;
			border: 0.1rem solid #d3d3d3;
			border-radius: 5px;
			margin-top: 14px;
			padding-left: 20px;
			display: flex;
			align-items: center;
			font-size: 22px;
			color: #c4c4c4;			
			.replay-inp{
				display: flex;
				align-items: center;
				input{
					width: 540px;
					height: 59px;
					border: 0;
					outline: none;
					font-size: 24px;
					color: #000000;
				}
				button{
					width: 100px;
					border: 0;
					outline: none;
					height: 59px;
				}
				.butColor{
					background: #3b8fb4;
					color: #fff;
				}
			}
		}
	}
	.comm-popup{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		.opaciy{
			width: 100%;
			height: 100%;
			background: #000;
			opacity: .5;
		}
		
		
		
		/*----------------------------------------------------------------*/
		.popup-input{
			width: 100%;
			background: #fff;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			position: absolute;
			bottom: -12px;
			left: 0;
			.popup-textarea{
				height: 120px;
				border-bottom: 0.1rem solid #e4e4e4;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				padding:34px 32px;
				textarea{
					width: 100%;
					height: 100%;
					border: 0;
					outline: none;
					resize: none;
					font-size: 32px;
					line-height: 40px;
				}
			}
			.popup-button{
				height: 90px;
				padding: 0 0 0 34px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.rea-pic{
					img{
						margin-right: 42px;
					}
					img:nth-child(1){
						width: 50px;
						height: 44px;
					}
					img:nth-child(2){
						width: 46px;
						height: 46px;
					}
				}
				button{
					width: 120px;
					height: 100%;
					line-height: 100%;
					font-size: 28px;
					border: 0;
					background: 0;
					color: #fff;
					outline: none;
					text-align: center;
					background: @default-blue;
				}
			}
			.popList{
				background: #f6f6f6;
				overflow: hidden;
				/*上传图片*/
				.pic-list{
					height: 300px;
					padding: 20px 50px 0;
					li{
						float: left;
						margin-right: 20px;
						margin-bottom: 20px;
						position: relative;
						img{
							width: 140px;
							height: 130px;
						}
						span{
							position: absolute;
							right: 0;
							top: 0;
							font-size: 20px;
							width: 30px;
							height: 30px;
							background: #000000;
							border-radius: 50%;	
							color: #FFFFFF;
							text-align: center;
							line-height: 35px;
						}
					}
					li:nth-child(4n){
						margin-right: 0;
					}
				}
				
				/*评分*/
				.score-con-center{
					height: 300px;
					display: flex;
					flex-direction:column;
					align-items: center;
					img{
						margin-top: 20px;
						width: 78px;
						height: 75px;
					}
					p{
						font-size: 26px;
						margin-top: 14px;
						margin-bottom: 12px;
					}
					/*滑块*/
					.score-slider{
						padding-top: 28px;
						input[type=range] {
						   -webkit-appearance: none;
						   width: 600px;
						   border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
						}
						input[type=range]::-webkit-slider-thumb {
						   -webkit-appearance: none;
						}  
						input[type=range]::-webkit-slider-runnable-track {
						   height: 40px;
						   border-radius: 20px; /*将轨道设为圆角的*/
						   background: url(../../../assets/images/details/backX.png);
						   /*box-shadow: 0 1px 5px #0d1112, inset 0 .125em .125em #0d1112; */ /*轨道内置阴影效果*/
						}
						input[type=range]:focus {
						   outline: none;
						}
						input[type=range]::-webkit-slider-thumb {
						   -webkit-appearance: none;
						   height: 70px;
						   width: 35px;
						   margin-top: -16px; /*使滑块超出轨道部分的偏移量相等*/
						   background: #ffffff; 
						   border-radius: 30%; /*外观设置为圆形*/
						   border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
						   /*box-shadow: 2px .125em .125em #3b4547;     */   /*添加底部阴影*/
						   box-shadow: #3b4547 0px 0px 10px;
						} 
					}
				}
			}
		}
	}
	
</style>